<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的文章-编程导航</title>
    <link type="favicon" rel="shortcut icon" th:href="@{/img/pns.png}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/account.css}">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}">
    <!-- 引入Jquery  -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <!-- 引入Layui.css -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 引入Layui.js -->
    <script th:src="@{/layui/layui.js}"></script>

    <!--引入VueJs-->
    <script th:src="@{/js/vue.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script th:src="@{/js/commen.js}"></script>
    <!-- <script th:src="@{/js/index.js}"></script>-->
    <script th:src="@{/js/myarticle.js}"></script>
</head>

<body>
<div class="toolbar">
    <div class="layui-container">
        <div class="layui-row">
            <div class="toolbar-container-left layui-col-md4">
                <div class="toolbar-logo">
                    <img th:src="@{/img/logo.png}" title="网站首页">
                </div>
                <div class="toolbar-menus">
                    <ul>
                        <li><a th:href="@{/}" title="网站首页">首页</a></li>
                        <li><a th:href="@{/resources}" title="编程资源">资源</a></li>
                        <!--                        <li><a th:href="index.html" title="世界">世界</a></li>-->
                        <li><a th:href="@{/rank}" title="全站热门内容">排行</a></li>
                    </ul>
                </div>
            </div>
            <div class="toolbar-container-middle layui-col-md4">
                <form action="/search" method="POSt" class="layui-form">
                    <input id="Search" type="text" name="key" required lay-verify="required" placeholder="请输入关键字搜索"
                           autocomplete="off" list="searchList" class="layui-input search-input">
                    <button type="button" class="layui-btn search">搜索</button>
                </form>
            </div>
            <div class="toolbar-container-right layui-col-md4">
                <ul class="layui-nav">
                    <<li class="layui-nav-item">
                    <a href=""><i class="el-icon-circle-plus"></i>&nbsp;创作</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/article/write}"><i class="layui-icon layui-icon-edit"></i>&nbsp;写文章</a></dd>
                        <dd><a th:href="@{/resource/add}"><i class="el-icon-upload"></i>&nbsp;上传资源</a></dd>
                    </dl>
                </li>
                    <li class="layui-nav-item">
                        <a href=""><i class="layui-icon layui-icon-notice"></i>消息<span class="layui-badge">9</span></a>
                    </li>
                    <li class="layui-nav-item account">
                        <a href="">
                            <img src="" class="layui-nav-img">
                            <span>我</span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a th:href="@{/user/account/account}" target="_blank"><i class="fa fa-universal-access"
                                                                                         aria-hidden="true"></i>&nbsp;账号管理</a></dd>
                            <dd><a th:href="@{/user/account/article}" target="_blank"><i class="fa fa-arrows-alt"></i>&nbsp;我的博客</a>
                            </dd>
                            <dd><a th:href="@{/user/account/res/}" target="_blank"><i class="fa fa-database"></i>&nbsp;我的分享</a></dd>
                            <dd><a th:href="@{/user/logout}"><i class="fa fa-sign-out"
                                                                aria-hidden="true"></i>&nbsp;退出</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="home">
    <div class="menu layui-col-md3">
        <div class="logo">
            <img id="accountLogo">
            <span class="logo-name layui-col-md12">韦月鑫</span>
        </div>
        <ul>
            <li class="li1"><i class="fa fa-universal-access"></i>&nbsp;个人信息</li>
            <li class="active li2"><i class="fa fa-arrows-alt"></i>&nbsp;文章管理</li>
            <li class="li3"><i class="fa fa-database"></i>&nbsp;我的资源</li>
            <li class="li4"><i class="fa fa-unlock-alt" aria-hidden="true"></i>&nbsp;修改密码
            </li>
        </ul>
    </div>
    <div class="content layui-col-md9">
        <div class="accountMessage">
            <div class="content-title">
                <p class="title">个人信息</p>
                <button class="changeAccountMessage layui-btn">修改信息</button>
            </div>
            <ul>
                <li>
                    <span class="account_name">昵&emsp;&emsp;称:</span>
                    <ss></ss>
                </li>
                <li>
                    <span class="account_name">邮&emsp;&emsp;箱:</span>
                    <ss></ss>
                </li>
                <li>
                    <span class="account_name">性&emsp;&emsp;别:</span>
                    <ss></ss>
                </li>
                <li>
                    <span class="account_name">个人简介:</span>
                    <ss></ss>
                </li>
                <li>
                    <span class="account_name">注册时间:</span>
                    <ss></ss>
                </li>
                <li>
                    <span class="account_name">积&emsp;&emsp;分:</span>
                    <ss></ss>
                </li>
                <li>
                    <span class="account_name">电&emsp;&emsp;话:</span>
                    <ss></ss>
                </li>
                <li>
                    <span class="account_name">现&nbsp;&nbsp;居&nbsp;&nbsp;地:</span>
                    <ss></ss>
                </li>
            </ul>
        </div>
        <div class="articleList">
            <div class="content-title">
                <p class="title">我的文章</p>
            </div>
            <div class="articleRank">
                <span id="RankByReadNum">按阅读量</span>
                <span class="RankActive" id="RankByTime">按发布时间</span><span>排序:</span>
            </div>
            <ul id="myArticles">
            </ul>
            <ul id="empty">
                <el-empty description="暂时还没有文章"></el-empty>
            </ul>
            <script type="text/javascript">
                new Vue({
                    el: '#empty',
                    data: function () {
                        return {
                            visible: false
                        }
                    }
                })
            </script>
        </div>
        <div class="resList">
            <div class="content-title">
                <p class="title">我的资源</p>
            </div>
            <ul id="myRes">
            </ul>
            <ul id="empty2">
                <el-empty description="暂时还没有文章"></el-empty>
            </ul>
            <script type="text/javascript">
                new Vue({
                    el: '#empty2',
                    data: function () {
                        return {
                            visible: false
                        }
                    }
                })
            </script>
        </div>
        <div class="changePassword">
            <div class="content-title">
                <p class="title">修改登录密码</p>
            </div>
            <ul>
                <li>
                    <label class="layui-form-label"><span>原&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码:</span></label>
                    <div class="layui-input-block">
                        <input type="password" name="oldPassword" id="oldPassword" required lay-verify="required"
                               placeholder="请输入原密码" autocomplete="off" class="layui-input">
                    </div>
                </li>
                <li>
                    <label class="layui-form-label"><span>新&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码:</span></label>
                    <div class="layui-input-block">
                        <input type="password" name="newPassword" id="newPassword" required lay-verify="required"
                               placeholder="请输入新密码" autocomplete="off" class="layui-input">
                    </div>
                </li>
                <li>
                    <label class="layui-form-label"><span>确&nbsp;认&nbsp;密&nbsp;码:</span></label>
                    <div class="layui-input-block">
                        <input type="password" name="checkPassword" id="checkPassword" required lay-verify="required"
                               placeholder="请再次输入确认密码" autocomplete="off" class="layui-input">
                    </div>
                </li>
                <li style="text-align:center">
                    <button class="layui-btn changePasswordBtn" id="changePasswordBtn">确认修改</button>
                </li>
            </ul>
        </div>
        <div class="editAccountMessage layui-form">
            <div class="content-title">
                <p class="title">编辑个人信息</p>
            </div>
            <ul>
                <li>
                    <label class="layui-form-label"><span>头&emsp;&emsp;像:</span></label>
                    <div class="layui-input-block lauyi-form-item">
                        <div class="layui-upload layui-input-block">
                            <img src="" id="accountHead">
                            <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i
                                    class="layui-icon">&#xe67c;</i>选择图片
                            </button>
                            <!-- <button type="button" class="layui-btn" id="uploadBtn">开始上传</button> -->
                        </div>
                    </div>
                </li>
                <li>
                    <label class="layui-form-label"><span>性&emsp;&emsp;别:</span></label>
                    <div class="layui-input-block lauyi-form-item sex">
                        <input type="radio" name="sex" value="男" title="男" checked>
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </li>
                <li>
                    <label class="layui-form-label"><span>个人简介:</span></label>
                    <div class="layui-input-block">
                        <textarea name="signature" required lay-verify="required" placeholder="请输入简介"
                                  class="layui-textarea signature"></textarea>
                    </div>
                </li>
                <li>
                    <label class="layui-form-label"><span>电&emsp;&emsp;话:</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" required lay-verify="required" placeholder="请输入电话号码"
                               autocomplete="off" class="layui-input">
                    </div>
                </li>
                <li>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span>现&nbsp;&nbsp;居&nbsp;&nbsp;地:</span></label>
                        <div class="layui-input-block">
                            <select name="city" lay-verify="required" id="city">
                                <option value=""></option>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广州">广州</option>
                                <option value="深圳">深圳</option>
                                <option value="杭州">杭州</option>
                                <option value="开封">开封</option>
                                <option value="拉萨">拉萨</option>
                                <option value="呼和浩特">呼和浩特</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li style="text-align:center">
                    <button class="layui-btn uploadChangeAccount">确认修改</button>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="footer layui-col-md12">
    Copyright © 2022 编程导航. All Rights Reserved MIT Licensed
</div>
</body>

</html>